<template>
    <div class="seckillall">
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">

                <el-form-item label="班级名称" prop="classId">
                    <el-select v-model="queryParams.classId" placeholder="请选择班级" filterable>
                        <el-option v-for="item in classList" :label="item.className" :key="item.classId"
                            :value="item.classId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="考勤日期" prop="attendDate">
                    <el-date-picker v-model="queryParams.attendDate" type="date" placeholder="请选择考勤日期"
                        value-format="YYYY-MM-DD" :picker-options="pickerOptions" />
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" size="default" @click="searchBtn()">搜索</el-button>
                    <el-button size="default" @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="middle">
                <div class=" add">
                    <div class="button">
                        <el-button type="success" :icon="Edit" @click="handleEdit()" plain>考勤</el-button>
                    </div>
                </div>
            </div>

            <div class="end">
                <el-table :data="tableData" row-key="courseId" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column label="序号" prop="index">
                        <template #default="scope">{{ scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column property="studentName" label="学生姓名" />

                    <el-table-column property="className" label="班级名称" />
                    <el-table-column property="attendDate" label="考勤日期" />

                    <el-table-column property="attendSocre" label="考勤分" />
                    <el-table-column property="note" label="备注" />
                    <el-table-column label="状态">
                        <template #default="scope">
                            <el-button type="success" v-if="scope.row.status == '正常'" plain>正常</el-button>
                            <el-button type="warning" v-else-if="scope.row.status == '迟到'" plain>迟到</el-button>
                            <el-button type="warning" v-else-if="scope.row.status == '早退'" plain>早退</el-button>
                            <el-button type="warning" v-else-if="scope.row.status == '请假'" plain>请假</el-button>
                            <el-button type="danger" v-else-if="scope.row.status == '旷课'" plain>旷课</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div style="margin-left: 600px;">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="queryParams.pageNum"
                            v-model:page-size="queryParams.pageSize" :page-sizes="[1, 2, 20, 50]"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>

            </div>


            <!-- 考勤弹窗 -->
            <el-dialog v-model="dialogVisible" :modal="true" width="800px">

                <el-form :model="formData" :rules="rules" ref="categoryForm">
                    <el-row>

                        <el-col :span="11">
                            <el-form-item label="班级名称" prop="classId">
                                <el-select v-model="formData.classId" placeholder="请选择班级名称" filterable>
                                    <el-option v-for="item in classList" :label="item.className" :key="item.classId"
                                        :value="item.classId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="11">
                            <el-form-item label="考勤状态" label-width="120px" prop="status">
                                <el-input v-model="formData.status" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="学生名称" prop="studentIds">
                                <el-select v-model="formData.studentIds" placeholder="请选择学生" multiple collapse-tags
                                    filterable style="width: 100%">
                                    <el-option v-for="item in studentList" :key="item.studentId"
                                        :label="item.studentName" :value="item.studentId">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="考勤分数" label-width="120px" prop="attendSocre">
                                <el-input v-model="formData.attendSocre" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" label-width="120px" prop="attendSocre">
                                <el-input v-model="formData.note" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="handleCanle">取消</el-button>
                        <el-button type="primary" @click="handleConfirm">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>


            <el-dialog v-model="deleteDialog" title="Tips" width="500">
                <span>确认要删除吗？</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="deleteDialog = false">取消</el-button>
                        <el-button type="primary" @click="deleteConfirm">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Search, Edit, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { selectAttend, selectAllClass, addAttend } from '@/api/attend'
import { selectAllStudents } from '@/api/Student'

//选择框
// const selectable = ref();
const categoryForm = ref(null);
const single = ref(true)
const multiple = ref(true)
const total = ref(10);
const dialogVisible = ref(false)


//是否禁用表单
const selectRow = ref([]);
const deleteDialog = ref(false)
const classList = ref([])
const studentList = ref([])




onMounted(async () => {
    await getClassList()
    await selectAllStudent()
    await getAllstudentList()

})
//查询参数
const queryParams = ref({
    classId: '',
    attendDate: '',

    pageNum: 1,
    pageSize: 2,

})
//表格参数
const tableData = ref([])
// 表单参数
var formData = ref({
    classId: '',
    studentIds: '',
    status: '',
    attendSocre: '',
    note: '',
    campusId:1,
})

//校验规则
const rules = {
    courseName: [
        { required: true, message: '请输入课程名称', trigger: 'blur' }
    ],
};

//每页条数变换
function handleSizeChange(val) {
    console.log("每页" + val + "条");
    queryParams.value.pageSize = val;
    queryParams.value.pageNum = 1;
    getAllstudentList();


}
//每码变换
function handleCurrentChange(val) {
    console.log("第" + val + "页")
    queryParams.value.pageNum = val;
    getAllstudentList();
}

//关闭dialog
function handleCanle() {
    dialogVisible.value = false
    // 重置表单字段
    categoryForm.value.resetFields();

    // 清除表单验证
    categoryForm.value.clearValidate();

}

// 选中某一列
function handleSelectionChange(selected) {
    console.log(selected, selected.length)
    single.value = selected.length != 1
    multiple.value = selected.length == 0
    selectRow.value = selected;

}

function searchBtn() {
    queryParams.value.pageNum = 1;
    getAllstudentList()
}

// 重置
function resetBtn() {
    queryParams.value = {
        classId: '',
        attendDate: '',
        pageNum: 1,
        pageSize: queryParams.value.pageSize,
    }

    getAllstudentList()
}

// 考勤
function handleEdit() {

    dialogVisible.value = true

}

function handleConfirm() {
    console.log(formData.value.classId, 3333)
    console.log(formData.value.studentIds, 4444)

    console.log(formData.value,5555566)

    addAttend(formData.value).then(res => {
        console.log(res,5556);
        if (res.code === 500) {
            ElMessage.error(res.message);
        } else {
            ElMessage.success("考勤成功")
        }

        
        getAllstudentList();
        dialogVisible.value = false
    })

}


async function getAllstudentList() {

    try {
        const res = await selectAttend(queryParams.value);
        total.value = res.data.attendList.total
        tableData.value = res.data.attendList.records
        for (const item of tableData.value) {
            for (const element of classList.value) {
                if (element.classId == item.classId) {
                    item.className = element.className
                }
            }
        }
    } catch (error) {
        console.log(error)
    }

}

async function getClassList() {
    try {
        const res = await selectAllClass();
        console.log(res, 555)
        classList.value = res.data.classList;
        console.log(classList.value, 999)
    } catch (e) {
        console.log(e)
    }

}

async function selectAllStudent() {
    try {
        const res = await selectAllStudents();
        console.log(res, 999)
        studentList.value = res.data.studentList
        // console.log(courseList.value,999)
    } catch (e) {
        console.log(e)
    }

}


</script>

<style scoped>
.seckillall {
    height: 100%;
    width: calc(100% - 50px);
    /* background-color: pink; */
    float: left;
}

.head {
    margin-top: 20px;
    margin-left: 20px;
    width: calc(100% - 50px);
}

.middle {
    width: 100%;
    height: 8vh;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 30px;

}

.add {
    margin-top: 15px;
    margin-left: 45px;
    width: 5%;
    height: 50%;
    float: left;
}

.end {
    float: left;
    width: calc(100% - 50px);
}
</style>